<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../js/vue.js"></script>
</head>
<body>

    <div id ="app">
        
        <table border="1px" width="800px">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            
            <tr v-for="user in list" :key="user.uid">

                <td>{{user.uid}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>

        <h1>普通数组数据的展示</h1>

        <span  v-for="(ele,index) in arr" :key="index">{{index}} -- {{ele}} <br> </span>





    </div>    
</body>
</html>

<script>
    new  Vue({
        el:"#app",
        data:{
            list :[
                {uid:'u001',name:'贵物',age:18},
                {uid:'u002',name:'好果汁',age:19},
                {uid:'u003',name:'冰红茶',age:20}

            ],
            arr: ['张三','李四','王五'], //普通数组数据
        }
    })



</script>